<template>
  <div class="swiper">
      <!-- 解决轮播图默认显示最后一张的问题，添加v-if，如果为空数组，则不显示，数据获取完全后显示画面 -->
    <swiper :options="swiperOption" class="swiper-img" v-if='showSwiper'>
      <!-- slides -->
      <swiper-slide v-for='item in list' :key='item.id'>
          <img :src="item.imgUrl" alt="">
      </swiper-slide>
      
     
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "homeSwiper",
  props:{list:Array},
  data () {
    return {
      swiperOption: {
          pagination:'.swiper-pagination',
          loop: true
      },
    };
  },
  computed: {
      showSwiper(){
         return this.list.length
      }
  }
};
</script>

<style lang="less" scoped>
// less和sass中使用/deep/穿透scoped当前作用域，访问外部插件中的元素
    .swiper /deep/ .swiper-pagination-bullet-active{
        background-color: #fff !important
    }
    .swiper{
        // 为了保证页面加载时不对轮播图下面元素产生位置影响。padding-bottom是图片的宽高比
        width: 100%;
        height: 0;
        overflow: hidden;
        // 原始图片宽高比
        padding-bottom: 31.25%;
        //当图片没显示出来显示灰色
        background-color: #ccc;
        .swiper-img{
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
</style>
